<template>
    <div class="home">
        <div>
            <van-search  placeholder="请输入搜索关键词" />
        </div>
        <!--轮播图-->
        <div class="swiper">
            <van-swipe class="lb" :autoplay="3000" indicator-color="white">
                <van-swipe-item class="swiper_item" v-for="(item,index) in lunbodata"  :key="index">
                    <img class="swi-img" style="width: 100%; height: 250px" :src="'http://192.168.40.177:8008/api'  + item.pic" alt/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--全部商品-->
        <div class="duons">
            <div class="duons-item" v-for="(item,index) in nav" :key="index">
                <img :src="'http://192.168.40.177:8008/api'  + item.pic" />
                <p>{{ item.name }}</p>
            </div>
        </div>
        <!-- 精品推荐-->
        <p class="tj"> 精品推荐：</p>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(item,index) in qptj" :key="index" @click="toDetail(item)">
                <van-image  :src="'http://192.168.40.177:8008/api' + item.image" />
                <div>{{ item.storeName}}</div>
                <van-card :price="item.price" :origin-price="item.otPrice"/>
            </van-grid-item>
        </van-grid>

        <!--猜你喜欢-->
        <p class="cn">猜你喜欢：</p>
        <div class="znxh">
            <van-card v-for="(item,index) in nav2" :key="index"
                      tag="Like"
                      :price="item.price "
                      :title="item.storeInfo" :desc="item.keyword"
                      :thumb="'http://192.168.40.177:8008/api' + item.image"
                      :origin-price="item.otPrice" />
        </div>

       <tab-bar></tab-bar>

    </div>
</template>
<script>
    import axios from "axios"
    //@ =src
    import {jia,jaiu,cai,caua} from '@/utills/yunsuan.js'
    import {getLbd, getqbsp,jptqq,getcnxh} from '@/api/home'
    //组件
    export default {
        name: "app",
        data() {
            return {
                //底部导航
                active: 0,
                lunbodata:[],
                qptj:[],
                nav2:[],
                nav: [],
            };
        },
        created() {
            //轮播图
            this.getLbd();
            this.getqbsp();
            this.jptqq();
            this. getcnxh();
            jia(1,5);
            jaiu(6,4);
            cai(9,7);
            caua(6,5);
        },
        methods:{
            toDetail(item){
                var id = item.id

            this.$router.push("/detail/" + id)
            },

            //轮播图
            getLbd(){
                var request = getLbd()
                request.then(res=>{
                    this. lunbodata = res.data.data
                })
            },
            //全部商品
            getqbsp(){
                var request = getqbsp()
                request.then(res=>{
                    this.nav =res.data.data
                })
            },
            //获取精品推荐
            jptqq(){
                var request = jptqq()
                request.then(res=>{
                    this.qptj =res.data.data
                })
            },
            //猜你喜欢
            getcnxh(){
                var request =getcnxh()
                request.then(res=>{
                    this.nav2 =res.data.data
                })
            },
            jia(a,b){
                console.log(a + b);
            },
            jaiu(a,b){
                console.log(a - b);
            },
            cai(a,b){
                console.log(a * b);
            },
            caua(a,b){
                console.log( a / b);
            }
        },
    };
</script>
<style>
    .van-card{
        background-color: #fdfdfe !important;
    }
    .van-card__price-integer{
        font-size: 20px!important;
    }
    .van-card__price-currency{
        font-size: 20px!important;
    }
    .van-card__price-decimal{
        font-size: 20px!important;
    }
    .van-card__price{
        color: orange!important;
    }
    .van-card__content{
        min-height: 0 !important;
    }
    .cn{
        margin-left: 10px;
    }
    .duons {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 25px;
        text-align: center;
    }
</style>
